<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JavaScript与DOM | 浪飞IT小栈</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="前后端技术分享">
    <meta name="keywords" content="前端博客,后端博客,人工智能,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown,java,Spring,Springboot,Redis,mysql">
    <meta name="baidu-site-verification" content="7F55weZDDc">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.ada71c49.css" as="style"><link rel="preload" href="/assets/js/app.a2a00aa5.js" as="script"><link rel="preload" href="/assets/js/2.256f807a.js" as="script"><link rel="preload" href="/assets/js/37.c4e27bbd.js" as="script"><link rel="prefetch" href="/assets/js/10.ab144fe3.js"><link rel="prefetch" href="/assets/js/11.062e0879.js"><link rel="prefetch" href="/assets/js/12.f9c60882.js"><link rel="prefetch" href="/assets/js/13.0a6ebfcf.js"><link rel="prefetch" href="/assets/js/14.03fc6f12.js"><link rel="prefetch" href="/assets/js/15.19dbf9fd.js"><link rel="prefetch" href="/assets/js/16.6e68160b.js"><link rel="prefetch" href="/assets/js/17.1d678834.js"><link rel="prefetch" href="/assets/js/18.4536fd5c.js"><link rel="prefetch" href="/assets/js/19.9c1b65df.js"><link rel="prefetch" href="/assets/js/20.c5f96e71.js"><link rel="prefetch" href="/assets/js/21.3f0b334e.js"><link rel="prefetch" href="/assets/js/22.55c868be.js"><link rel="prefetch" href="/assets/js/23.91286241.js"><link rel="prefetch" href="/assets/js/24.c1af1909.js"><link rel="prefetch" href="/assets/js/25.a995a755.js"><link rel="prefetch" href="/assets/js/26.abc5dea3.js"><link rel="prefetch" href="/assets/js/27.1eb62850.js"><link rel="prefetch" href="/assets/js/28.b383a871.js"><link rel="prefetch" href="/assets/js/29.088e0d73.js"><link rel="prefetch" href="/assets/js/3.cd716564.js"><link rel="prefetch" href="/assets/js/30.3ccc98d5.js"><link rel="prefetch" href="/assets/js/31.aab7cc23.js"><link rel="prefetch" href="/assets/js/32.5e16b7e6.js"><link rel="prefetch" href="/assets/js/33.4aaeb741.js"><link rel="prefetch" href="/assets/js/34.45e8e898.js"><link rel="prefetch" href="/assets/js/35.5899c97a.js"><link rel="prefetch" href="/assets/js/36.32e2e263.js"><link rel="prefetch" href="/assets/js/38.fe5e60d2.js"><link rel="prefetch" href="/assets/js/39.2cb0b4ee.js"><link rel="prefetch" href="/assets/js/4.edf4d5e7.js"><link rel="prefetch" href="/assets/js/40.08d5bead.js"><link rel="prefetch" href="/assets/js/41.2f80f24b.js"><link rel="prefetch" href="/assets/js/42.43a49913.js"><link rel="prefetch" href="/assets/js/43.08da7ec2.js"><link rel="prefetch" href="/assets/js/44.7c7cb8a9.js"><link rel="prefetch" href="/assets/js/45.0ddf7e7f.js"><link rel="prefetch" href="/assets/js/46.7c4609a5.js"><link rel="prefetch" href="/assets/js/47.edf3ddf8.js"><link rel="prefetch" href="/assets/js/48.569a90b9.js"><link rel="prefetch" href="/assets/js/49.fa368ac8.js"><link rel="prefetch" href="/assets/js/5.24054156.js"><link rel="prefetch" href="/assets/js/50.b9b3ea7f.js"><link rel="prefetch" href="/assets/js/51.a2ebf0fe.js"><link rel="prefetch" href="/assets/js/52.31f02238.js"><link rel="prefetch" href="/assets/js/53.4110ef1e.js"><link rel="prefetch" href="/assets/js/54.dab741c7.js"><link rel="prefetch" href="/assets/js/55.f27984e9.js"><link rel="prefetch" href="/assets/js/56.bd4c1a8e.js"><link rel="prefetch" href="/assets/js/57.375d40cb.js"><link rel="prefetch" href="/assets/js/58.932e3864.js"><link rel="prefetch" href="/assets/js/59.e657be1b.js"><link rel="prefetch" href="/assets/js/6.b259c061.js"><link rel="prefetch" href="/assets/js/60.88d94274.js"><link rel="prefetch" href="/assets/js/61.fa71d884.js"><link rel="prefetch" href="/assets/js/62.a9d3b3b7.js"><link rel="prefetch" href="/assets/js/63.f849fe75.js"><link rel="prefetch" href="/assets/js/64.1770f7a9.js"><link rel="prefetch" href="/assets/js/65.6afc33db.js"><link rel="prefetch" href="/assets/js/66.799f2eb4.js"><link rel="prefetch" href="/assets/js/67.f36b2f7d.js"><link rel="prefetch" href="/assets/js/68.868cd00b.js"><link rel="prefetch" href="/assets/js/69.4c29b907.js"><link rel="prefetch" href="/assets/js/7.e34ea00f.js"><link rel="prefetch" href="/assets/js/70.1b993ed4.js"><link rel="prefetch" href="/assets/js/71.e16ad4f9.js"><link rel="prefetch" href="/assets/js/72.627505e6.js"><link rel="prefetch" href="/assets/js/73.32768e14.js"><link rel="prefetch" href="/assets/js/74.968a580d.js"><link rel="prefetch" href="/assets/js/75.42d5af3d.js"><link rel="prefetch" href="/assets/js/76.19a69d31.js"><link rel="prefetch" href="/assets/js/77.cf627a78.js"><link rel="prefetch" href="/assets/js/78.07177880.js"><link rel="prefetch" href="/assets/js/8.c4dd00ce.js"><link rel="prefetch" href="/assets/js/9.0ff73be2.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ada71c49.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="浪飞IT小栈" class="logo"> <span class="site-name can-hide">浪飞IT小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/pages/6138ae/" class="nav-link">Java速通</a></div><div class="nav-item"><a href="/pages/705b35/" class="nav-link">面试经典</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="精品项目" class="dropdown-title"><a href="/project/" class="link-title">精品项目</a> <span class="title" style="display:none;">精品项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>桌面端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>PC后端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/javascript/" class="nav-link">项目1</a></li><li class="dropdown-subitem"><a href="/note/typescript-axios/" class="nav-link">项目二</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">电子书</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><a href="/pages/0c07b2/" class="nav-link">IT杂货铺</a></div><div class="nav-item"><a href="/archives/" class="nav-link">更多资源</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/avatar.jpg"> <div class="blogger-info"><h3>浪飞yes</h3> <span>无法简单的人儿~</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/pages/6138ae/" class="nav-link">Java速通</a></div><div class="nav-item"><a href="/pages/705b35/" class="nav-link">面试经典</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="精品项目" class="dropdown-title"><a href="/project/" class="link-title">精品项目</a> <span class="title" style="display:none;">精品项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>桌面端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>PC后端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/javascript/" class="nav-link">项目1</a></li><li class="dropdown-subitem"><a href="/note/typescript-axios/" class="nav-link">项目二</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">电子书</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><a href="/pages/0c07b2/" class="nav-link">IT杂货铺</a></div><div class="nav-item"><a href="/archives/" class="nav-link">更多资源</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>开篇</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>基础语法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>面向对象</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>常用类</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>基础高级</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>数据库</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>前端技术</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/84c5d2/" class="sidebar-link">HTML与CSS</a></li><li><a href="/pages/42b6b6/" aria-current="page" class="active sidebar-link">JavaScript与DOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/pages/42b6b6/#一、今日学习内容与目标" class="sidebar-link">一、今日学习内容与目标</a></li><li class="sidebar-sub-header level2"><a href="/pages/42b6b6/#二、javascript入门" class="sidebar-link">二、JavaScript入门</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_2-1-javascript-基本介绍-了解" class="sidebar-link">2.1 JavaScript 基本介绍（了解）</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-1-1-简介" class="sidebar-link">2.1.1 简介</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-1-2-组成部分" class="sidebar-link">2.1.2 组成部分</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-1-3-javascript-的特点" class="sidebar-link">2.1.3 JavaScript 的特点</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_2-2-js-代码编写的位置-掌握" class="sidebar-link">2.2 JS 代码编写的位置(掌握)</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-2-1-直接编写在-html-的-script-标签中" class="sidebar-link">2.2.1 直接编写在 HTML 的 script 标签中</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-2-2-编写在-js-文件中" class="sidebar-link">2.2.2 编写在 JS 文件中</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-2-3-注意事项" class="sidebar-link">2.2.3 注意事项</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_2-3-js-的基本语法-类比学习" class="sidebar-link">2.3 JS 的基本语法（类比学习）</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_2-4-变量-重点掌握" class="sidebar-link">2.4 变量（重点掌握）</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-4-1-变量的作用" class="sidebar-link">2.4.1 变量的作用</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-4-2-变量声明" class="sidebar-link">2.4.2 变量声明</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-4-3-注意事项" class="sidebar-link">2.4.3 注意事项</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-4-4-变量打印方式" class="sidebar-link">2.4.4 变量打印方式</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_2-5-数据类型" class="sidebar-link">2.5 数据类型</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-5-1-概述" class="sidebar-link">2.5.1 概述</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-5-2-常用的数据类型-掌握" class="sidebar-link">2.5.2 常用的数据类型（掌握）</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_2-5-3-typeof-运算符-了解" class="sidebar-link">2.5.3 typeof 运算符（了解）</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_2-6-运算符-掌握" class="sidebar-link">2.6 运算符（掌握）</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/42b6b6/#三、函数-掌握" class="sidebar-link">三、函数（掌握）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_3-1-函数概述" class="sidebar-link">3.1 函数概述</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_3-2-函数的定义" class="sidebar-link">3.2 函数的定义</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_3-3-函数的调用" class="sidebar-link">3.3 函数的调用</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/42b6b6/#四、面向对象" class="sidebar-link">四、面向对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_4-1-内置对象-了解" class="sidebar-link">4.1 内置对象(了解)</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/42b6b6/#五、数组" class="sidebar-link">五、数组</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_5-1-数组的定义方式" class="sidebar-link">5.1 数组的定义方式</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_5-2-数组中的常用属性和方法" class="sidebar-link">5.2 数组中的常用属性和方法</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_5-3-数组的遍历方式" class="sidebar-link">5.3 数组的遍历方式</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/42b6b6/#六、js-中的-dom" class="sidebar-link">六、JS 中的 DOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_6-1-dom-的概述" class="sidebar-link">6.1 DOM 的概述</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_6-2-获取元素" class="sidebar-link">6.2 获取元素</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_6-2-1-document-变量" class="sidebar-link">6.2.1 document 变量</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_6-2-2-window-onload-函数" class="sidebar-link">6.2.2 window.onload 函数</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_6-2-3-元素获取两个核心" class="sidebar-link">6.2.3 元素获取两个核心</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_6-2-4-元素获取方式" class="sidebar-link">6.2.4 元素获取方式</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_6-3-元素节点的属性操作" class="sidebar-link">6.3 元素节点的属性操作</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_6-4-node-对象的属性和方法" class="sidebar-link">6.4 Node 对象的属性和方法</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_6-4-1-常用属性" class="sidebar-link">6.4.1 常用属性</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_6-4-2-常用方法" class="sidebar-link">6.4.2 常用方法</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_6-5-元素节点的增删改案例" class="sidebar-link">6.5 元素节点的增删改案例</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/42b6b6/#七、事件处理" class="sidebar-link">七、事件处理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_7-1-事件驱动编程" class="sidebar-link">7.1 事件驱动编程</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_7-2-事件驱动编程的核心对象" class="sidebar-link">7.2 事件驱动编程的核心对象</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_7-3-事件类型-常用" class="sidebar-link">7.3 事件类型(常用)</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_7-3-1-鼠标事件" class="sidebar-link">7.3.1 鼠标事件</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_7-3-2-键盘事件" class="sidebar-link">7.3.2 键盘事件</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_7-3-3-表单事件-form" class="sidebar-link">7.3.3 表单事件 form</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_7-4-事件绑定的方式" class="sidebar-link">7.4 事件绑定的方式</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_7-4-1-在标签上使用onxxx属性绑定" class="sidebar-link">7.4.1 在标签上使用onXxx属性绑定</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_7-4-2-通过元素对象的事件属性绑定" class="sidebar-link">7.4.2 通过元素对象的事件属性绑定</a></li><li class="sidebar-sub-header level4"><a href="/pages/42b6b6/#_7-4-3-通过元素对象的方法绑定事件" class="sidebar-link">7.4.3 通过元素对象的方法绑定事件</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/42b6b6/#八、综合练习" class="sidebar-link">八、综合练习</a></li><li class="sidebar-sub-header level2"><a href="/pages/42b6b6/#九、小结与作业" class="sidebar-link">九、小结与作业</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_9-1-小结" class="sidebar-link">9.1 小结</a></li><li class="sidebar-sub-header level3"><a href="/pages/42b6b6/#_9-2-作业" class="sidebar-link">9.2 作业</a></li></ul></li></ul></li><li><a href="/pages/1125b7/" class="sidebar-link">网络编程与Tomcat</a></li><li><a href="/pages/be0e03/" class="sidebar-link">Http与Servlet</a></li><li><a href="/pages/9902e4/" class="sidebar-link">请求与响应</a></li><li><a href="/pages/18345f/" class="sidebar-link">JSP与EL与JSTL</a></li><li><a href="/pages/aa67fd/" class="sidebar-link">WEB版CRUD</a></li><li><a href="/pages/baec2f/" class="sidebar-link">Cookie与Session</a></li><li><a href="/pages/73e2cb/" class="sidebar-link">文件上传与下载和登录</a></li><li><a href="/pages/f99e33/" class="sidebar-link">项目实战-MIS系统</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>热门框架</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前后端分离</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>权限控制</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>NoSQL</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>微服务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>消息中间件</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>脚手架</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>技术增值</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><a href="/categories/?category=Java%E9%80%9F%E9%80%9A" title="分类" data-v-06225672>Java速通</a></li><li data-v-06225672><a href="/categories/?category=%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF" title="分类" data-v-06225672>前端技术</a></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://github.com/langfeiyes" target="_blank" title="作者" class="beLink" data-v-06225672>langfeiyes</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2024-03-03</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">JavaScript与DOM<!----></h1>  <div class="theme-vdoing-content content__default"><h1 id="javascript与dom"><a href="#javascript与dom" class="header-anchor">#</a> JavaScript与DOM</h1> <h2 id="一、今日学习内容与目标"><a href="#一、今日学习内容与目标" class="header-anchor">#</a> 一、今日学习内容与目标</h2> <ul><li>了解 js 组成以及特点</li> <li>掌握 js 的编写位置和执行位置</li> <li>掌握 js 的基本语法(和 Java 一样)</li> <li>掌握 js 变量定义</li> <li>掌握 js 常用数据类型</li> <li>掌握 js 的函数定义和调用</li> <li>了解 js 的面向对象内容</li> <li>掌握 js 中数组的定义和使用</li> <li>了解 js 中的 DOM</li> <li>掌握 js 中 document 的加载原理和使用注意事项</li> <li>掌握 js 中 window.onload 函数作用</li> <li>掌握使用 js 获取标签对象的方式</li> <li>掌握使用 js 操作标签对象中的属性</li> <li>掌握使用 js 对标签对象进行 CRUD</li> <li>掌握事件操作流程</li> <li>了解事件类型</li> <li>掌握事件的两种绑定方法</li></ul> <h2 id="二、javascript入门"><a href="#二、javascript入门" class="header-anchor">#</a> 二、JavaScript入门</h2> <p>作为一门新的语言，我们需要重点关注的有哪些？</p> <ol><li>该语言能做什么？能为我们提供哪些功能？</li> <li>该语言在什么地方编写？实现某个功能需要怎么写？</li> <li>该语言怎么运行？谁在调用执行？</li></ol> <h3 id="_2-1-javascript-基本介绍-了解"><a href="#_2-1-javascript-基本介绍-了解" class="header-anchor">#</a> 2.1 JavaScript 基本介绍（了解）</h3> <h4 id="_2-1-1-简介"><a href="#_2-1-1-简介" class="header-anchor">#</a> 2.1.1 简介</h4> <p>​		JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的 <a href="https://baike.baidu.com/item/%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80/1379708" target="_blank" rel="noopener noreferrer">脚本语言<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。</p> <p>JavaScript 在1995年由 Netscape 公司的布兰登·艾奇，在网景导航者浏览器上首次设计实现而成。因为 Netscape与Sun合作，Netscape 管理层希望它<strong>外观看起来像 Java</strong>，因此取名为 JavaScript。但实际上它的语法风格与 Self 及Scheme 较为接近。</p> <p>JavaScript 的标准（规范/API）是 ECMAScript ，2015年 6 月17日，ECMA国际组织发布了 ECMAScript 第六版，该版正式命名为 ECMAScript 2015，通常称为 ECMAScript 6 或者 ES6，目前所有浏览器都支持了ES6，是标准稳定的版本。</p> <h4 id="_2-1-2-组成部分"><a href="#_2-1-2-组成部分" class="header-anchor">#</a> 2.1.2 组成部分</h4> <p>JavaScript 的内容，包含以下三部分：</p> <ol><li><p><strong>ECMAScript（核心）</strong>：JavaScript 语言基础(规定了 JavaScript 脚本的核心语法，如 数据类型、关键字、保留字、运算符、对象和语句等）</p></li> <li><p><strong>DOM（文档对象模型）</strong>：规定了访问 HTML 和 XML 的接口（提供了访问 HTML 文档（如 body、form、div、textarea 等）的途径以及操作方法）；Node：Document、Element、Attribute、Text</p></li> <li><p>BOM（浏览器对象模型）：提供了独立于内容而在浏览器窗口之间进行交互的对象和方法(提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）。</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200505193644796-1708427620949.png" alt="image-20200505193644796"></p></li></ol> <h4 id="_2-1-3-javascript-的特点"><a href="#_2-1-3-javascript-的特点" class="header-anchor">#</a> 2.1.3 JavaScript 的特点</h4> <ol><li>是一种解释性脚本语言（代码不进行预编译）；</li> <li>主要用来向 HTML（标准通用标记语言下的一个应用）页面添加交互行为；</li> <li>可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。</li></ol> <h3 id="_2-2-js-代码编写的位置-掌握"><a href="#_2-2-js-代码编写的位置-掌握" class="header-anchor">#</a> 2.2 JS 代码编写的位置(掌握)</h3> <p><span style="color:red;">HTML 和 JS 都是直接交给浏览器去执行和渲染, 每个浏览器中都有对应的 JS 引擎,JS 代码的执行需要依赖 HTML，不能单独执行。</span></p> <h4 id="_2-2-1-直接编写在-html-的-script-标签中"><a href="#_2-2-1-直接编写在-html-的-script-标签中" class="header-anchor">#</a> 2.2.1 直接编写在 HTML 的 script 标签中</h4> <p>script 标签可以存放在 HTML 标签中的任何位置，但是推荐写在 head 标签里面（行业标准，直观）。</p> <p><strong>注意: HTML 中 js 的所有代码都是顺序执行,出错则不再往下执行，SyntaxError 则都不执行</strong>.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Content-Type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/html; charset=UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>JS可编写的位置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;Hello JavaScript!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">alert</span><span class="token punctuation">(</span>Hello JavaScript<span class="token operator">!</span><span class="token punctuation">)</span><span class="token punctuation">;</span>		<span class="token comment">// 错误代码开始，终止后续js代码执行</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;Hello JavaScript!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h4 id="_2-2-2-编写在-js-文件中"><a href="#_2-2-2-编写在-js-文件中" class="header-anchor">#</a> 2.2.2 编写在 JS 文件中</h4> <p>单独编写一个文件 (*.js) 来存放 Javascript 代码，然后在需要使用的 html 页面直接引入该 js 文件。</p> <p>好处：可以使 js 文件和 HTML 文件相分离、一个 js 文件可被多个 HTML 文件使用、维护起来也更方便等等。</p> <p>index.js: 编写JS代码</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//这里只能编写JS代码</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;Hello JavaScript&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token operator">-</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>index.html: 引入 JS 文件</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!--使用 script 标签的 src 属性加载指定的 js文件,type 可省略--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="_2-2-3-注意事项"><a href="#_2-2-3-注意事项" class="header-anchor">#</a> 2.2.3 注意事项</h4> <p>方式 2 不能跟方式 1 杂糅使用</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 错误的演示代码 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;script标签不能同时引入js文件和编写其他js代码&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>方式 2 中 script <strong>标签是双标签</strong>,不能写成单标签。<code>&lt;script&gt;</code> 标签不成对时，js 文件不执行</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 错误的演示代码 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index1.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;text/javascript&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;index2.js&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!--index1 标签成对,执行 index2被忽略--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index3.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;text/javascript&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;index4.js&quot;</span><span class="token operator">&gt;</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!--index3 标签成对,执行 index4被忽略--&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_2-3-js-的基本语法-类比学习"><a href="#_2-3-js-的基本语法-类比学习" class="header-anchor">#</a> 2.3 JS 的基本语法（类比学习）</h3> <ol><li><p>JavaScript 中的标识符</p> <p>变量，常量，函数，语句块也有名字，我们统统称之为标识符。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成，标识符不能以数字开头，不能是 JavaScript 中的保留字或关键字。</p></li></ol> <p><strong>合法的标识符举例</strong>：indentifier、username、user_name、_userName、$username；
<strong>非法的标识符举例</strong>：int、8.3、Hello World。</p> <ol start="2"><li><p>JavaScript 严格区分大小写
username 和 userName 是两个完全不同的符号。</p></li> <li><p>JavaScript 程序代码的格式
每条功能执行语句的最后必须用分号 <strong>;</strong> 结束</p> <p>每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开 。</p> <p>语句块使用{}来表示。</p></li> <li><p>JavaScript 程序的注释
<code>/*…*/</code>中可以嵌套“//”注释，但不能嵌套“ <code>/*…*/</code>”。 、<code>/**</code></p></li> <li><p><code>..文档注释.*/</code>
和 Java 基本语法做类比学习,相同的直接过掉,重点记忆和理解不同点</p></li> <li><p>JS 中的关键字和保留字</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200505210552255-1708427620949.png" alt="image-20200505210552255"></p></li></ol> <h3 id="_2-4-变量-重点掌握"><a href="#_2-4-变量-重点掌握" class="header-anchor">#</a> 2.4 变量（重点掌握）</h3> <h4 id="_2-4-1-变量的作用"><a href="#_2-4-1-变量的作用" class="header-anchor">#</a> 2.4.1 变量的作用</h4> <p>系统为之设置一个标识，程序可以用变量名来指向具体的对象内存，并通过变量名来获得对应的对象。</p> <h4 id="_2-4-2-变量声明"><a href="#_2-4-2-变量声明" class="header-anchor">#</a> 2.4.2 变量声明</h4> <p>JS 是弱类型的语言,定义变量时未严格区分数据类型.</p> <p>(1) 使用 var/let 关键字代替所有类型，例如：let username; 若变量没有初始化，默认是 undefined。</p> <p>(2) 也可以在声明变量的同时为其赋值, 例如 ：let username = &quot;小狼&quot;;</p> <p>(3) 单独对变量赋值（注意类型）,例如：username =18;</p> <p>(4) 变量的类型由值来决定,值是什么类型,变量就是什么类型.</p> <p>(5) let 不可声明同名变量，会报语法错。</p> <p>(6) 常量使用 const 声明，值不可修改</p> <p>var.js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// let username;</span>
<span class="token comment">// alert(username);       // undefined</span>
<span class="token keyword">let</span> username <span class="token operator">=</span> <span class="token string">&quot;小狼&quot;</span><span class="token punctuation">;</span>  <span class="token comment">// 声明的同时赋值，可声明同名变量，会覆盖前面的变量</span>
<span class="token function">alert</span><span class="token punctuation">(</span>username<span class="token punctuation">)</span><span class="token punctuation">;</span>
username <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>		<span class="token comment">// 单独赋值，需注意值的类型的合理性</span>

<span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token comment">// let age = 20;	// 错误，SyntaxError，解开则整个js文件无法执行</span>
<span class="token function">alert</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> email<span class="token operator">=</span><span class="token string">&quot;huangshaocun@wolfcode.cn&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 声明常量，值不可修改</span>
<span class="token comment">// email=&quot;wille@wolfcode.cn&quot;;			// TypeError 错误使用</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h4 id="_2-4-3-注意事项"><a href="#_2-4-3-注意事项" class="header-anchor">#</a> 2.4.3 注意事项</h4> <p><strong>1 不事先声明变量而直接使用会报错</strong></p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200915105737725-1708427620949.png" alt="image-20200915105737725"></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// let age = 10;		// 注释 age 的声明，观察未声明直接使用的错误</span>
<span class="token comment">// let age = 20;		// 错误，SyntaxError，解开则整个js文件无法执行</span>
<span class="token function">alert</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>提示</strong>：JavaScript 定义变量无需指定类型，任何类型都使用 var 或 let声明，可以将 var / let 理解为 Java 中的 Object ,可以接收任何类型的值.</p> <h4 id="_2-4-4-变量打印方式"><a href="#_2-4-4-变量打印方式" class="header-anchor">#</a> 2.4.4 变量打印方式</h4> <p>方式 1：alert(变量名); 直接在浏览器中弹出对话框 (需点击确定,麻烦,不利于语法实践和测试)</p> <p><strong><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200505210619838-1708427620949.png" alt="image-20200505210619838"></strong></p> <p>**方式 2(推荐)：**console.log(变量名); （info、<strong>log</strong>、debug、warn、error）: 在浏览器控制台打印内容</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200505210640115-1708427620949.png" alt="image-20200505210640115"></p> <p>所有的方法都是在控制台打印内容,只是显示效果有所差异,这里咱们统一使用 log 来显示即可,等价于 Java 中的: System.out.println();</p> <p>console.log();  还可以如 Java 的可变参数一样,一次传入多个数据, console.log(username,age);</p> <h3 id="_2-5-数据类型"><a href="#_2-5-数据类型" class="header-anchor">#</a> 2.5 数据类型</h3> <h4 id="_2-5-1-概述"><a href="#_2-5-1-概述" class="header-anchor">#</a> 2.5.1 概述</h4> <p>​		JavaScript 中变量似乎很简单，因为它声明变量只需要一个 “let” 就可以，不像其他编程语言严格区分了数据类型（int/double/char/boolean...）。这样做也是有好处的，变量可以被赋予任何类型的值，同样也可以给这个变量重新赋予不同类型的值。并不是“一定终身”。</p> <p>可是，JavaScript 并没有避开数据类型，只是在声明时统一使用无类型（untyped）的“let”关键字而已，它的数据类型是根据所赋值的类型来确定的。</p> <p>​		<strong>简单类型: String，Number，Boolean，Null，undefined</strong></p> <p>​		<strong>对象类型: Object, Array, Function</strong></p> <p>​		Object 对象自身用处不大，不过在了解其他类之前，还是应该了解它。因为 ECMAScript 中的 Object 对象与 Java 中的  java.lang.Object 相似，ECMAScript 中的所有对象都由这个对象继承而来，Object  对象中的所有属性和方法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。</p> <h4 id="_2-5-2-常用的数据类型-掌握"><a href="#_2-5-2-常用的数据类型-掌握" class="header-anchor">#</a> 2.5.2 常用的数据类型（掌握）</h4> <ol><li><p>Number 数值</p> <ol><li>整数常量,如: 100</li> <li>实数常量, 如: 12.32、193.98、 5E7、4e5等</li> <li>特殊数值(了解)：NaN、Infinity (除数为零)，所对应的判断函数 isNaN()、isFinite()</li></ol></li> <li><p>Boolean 布尔</p> <p>两种值: true 和 false。</p></li> <li><p>String 字符串</p> <p>值可以使用单引号或者双引号括起来。注意 js 中没有 char 类型，所以 'a' 也是一个字符串。</p></li> <li><p>其他常量</p> <p>null 常量、undefined 常量 （定义未赋值）。</p></li></ol> <h4 id="_2-5-3-typeof-运算符-了解"><a href="#_2-5-3-typeof-运算符-了解" class="header-anchor">#</a> 2.5.3 typeof 运算符（了解）</h4> <p>在 js 中获取变量的数据类型</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> msg <span class="token operator">=</span><span class="token string">'hello'</span><span class="token punctuation">;</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> msg <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//string</span>
msg <span class="token operator">=</span> <span class="token number">19</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> msg <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//number</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>注意</strong>: 在 js 中只有&quot; <strong>let 变量名 = 值</strong> &quot;, 不存在 &quot; <strong>变量类型 变量名 = 值</strong> &quot;</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 正例</span>
<span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token comment">// 反例</span>
Number age <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_2-6-运算符-掌握"><a href="#_2-6-运算符-掌握" class="header-anchor">#</a> 2.6 运算符（掌握）</h3> <p>​	JS 中的大部分运算符都和 Java 中的一样,这里只说几个不一样的运算符</p> <ol><li><p><strong>比较运算符</strong>
= 和 == 以及 === 之间的区别：
= 赋值运算符：用于把一个常量/变量的值赋值给另外一个变量
==  比较运算符：用于比较两个数据的值是否相等，不会去判断类型 console.log(&quot;18&quot; == 18 );
<strong>=== 比较运算符</strong>：先判断数据类型是否相等，然后再去判断值是否相等 console.log(&quot;18&quot; === 18);</p></li> <li><p><strong>逻辑运算符</strong></p> <p><strong>在逻辑运算中 0、&quot;&quot;、false、NaN、undefined、null 看成为 false</strong>，其他数据都表示 true。
a &amp;&amp; b   将 a, b 先表示为 Boolean 类型，再执行逻辑与，若 a 为 false，则返回 a，否则就返回 b；
a  ||  b    将 a, b 先表示为 Boolean 类型，再执行逻辑或，若 a 为 true，则返回 a，否则就返回 b；</p> <p><strong>&amp;&amp; 和 || 运算符的区别</strong></p> <p>​	&amp;&amp;  操作：从左往右依次判断，返回第一个为 false 的值，否则返回最后一个为 true 的值；</p></li></ol> <p>​					&amp;&amp; 找 false ,找到则返回对应的值,直到最后一个如果没有找到,则返回最后一值.</p> <p>​	       ||    操作：从左往右依次判断，返回第一个为 true 的值，否则返回最后一个为 false 的值。</p> <p>​                   ||  找 true ,找到则返回对应的值,直到最后一个如果没有找到,返回最后一个值.</p> <p>完成下面的练习:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token boolean">true</span> <span class="token operator">&amp;&amp;</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;A&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;A&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token number">2</span> <span class="token operator">&amp;&amp;</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token boolean">true</span> <span class="token operator">||</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">||</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">||</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;A&quot;</span> <span class="token operator">||</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span> <span class="token operator">||</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token operator">||</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;A&quot;</span> <span class="token operator">||</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">||</span> <span class="token number">2</span> <span class="token operator">||</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">||</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span> <span class="token operator">||</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>经典应用场景：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       x <span class="token operator">=</span> x <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">;</span>
       console<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>	<span class="token comment">//如果x有为true的值,则返回x的值,否则返回0</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="三、函数-掌握"><a href="#三、函数-掌握" class="header-anchor">#</a> 三、函数（掌握）</h2> <h3 id="_3-1-函数概述"><a href="#_3-1-函数概述" class="header-anchor">#</a> 3.1 函数概述</h3> <p>js 中的函数，作用和 Java 中的方法一样,都是为了实现代码的复用</p> <p>将脚本编写为函数，避免页面载入时就执行该脚本。</p> <p>写在函数里面的 js 代码，只需要定义一次，就可以多次调用，提高代码的复用性。</p> <h3 id="_3-2-函数的定义"><a href="#_3-2-函数的定义" class="header-anchor">#</a> 3.2 函数的定义</h3> <ol><li><p>普通函数语法:</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// Java 中方法的定义</span>
<span class="token comment">/* 
public String doWork(String name){
    return name;
}
*/</span>

<span class="token comment">// JS中不用指定函数的返回值类型(无论怎样都有返回,JS是弱类型语言)</span>
<span class="token keyword">function</span> <span class="token function">函数名</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>参数名称<span class="token number">1</span><span class="token punctuation">,</span> 参数名称<span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">,</span> 参数名称<span class="token constant">N</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
 	<span class="token comment">//程序代码</span>
    <span class="token punctuation">[</span><span class="token keyword">return</span> 值<span class="token punctuation">;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>参数和返回值都是可选的, 由自己的实际需求决定,
如果函数没有返回值，就默认返回 undefined.</p> <p><strong>案例</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 普通函数定义,有参有返回</span>
<span class="token keyword">function</span> <span class="token function">doWork1</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 普通函数定义,无参无返回</span>
<span class="token keyword">function</span> <span class="token function">doWork2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div></li> <li><p>定义匿名函数语法:</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">let</span> <span class="token function-variable function">变量名</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>参数名称<span class="token number">1</span><span class="token punctuation">,</span> 参数名称<span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">,</span> 参数名称<span class="token constant">N</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token comment">//程序代码</span>
    <span class="token punctuation">[</span><span class="token keyword">return</span> 值<span class="token punctuation">;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>案例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword">return</span> x<span class="token operator">+</span>y<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ol> <p>一般定义一个函数时，我们会给函数起一个固定的名称，我们称之为函数名。
匿名函数是指没有固定的函数名称，通常情况是定义一个变量接收该匿名函数。
实际开发中用的非常之多，可以把匿名函数看成一个普通的值来理解。</p> <ol start="3"><li><p>定义箭头函数</p> <p>箭头函数其实类似匿名函数，把匿名函数的 function 去除，在参数右边加 <code>=&gt;</code> 即可,简洁，但可读性差。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 无参单行函数体的箭头函数</span>
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;箭头函数&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 等价如下</span>
<span class="token comment">/*
function (){
    console.log(&quot;箭头函数&quot;;
}
*/</span>
<span class="token comment">// 无参多行函数体的箭头函数</span>
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;函数体1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;函数体2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 一个形参数的箭头函数</span>
<span class="token parameter">username</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>username<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 多个参数多行函数体</span>
<span class="token punctuation">(</span><span class="token parameter">username<span class="token punctuation">,</span>age</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>username<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p><strong>注意</strong>：箭头函数没有自己的 this,arguments,super 或 new.target</p></li></ol> <h3 id="_3-3-函数的调用"><a href="#_3-3-函数的调用" class="header-anchor">#</a> 3.3 函数的调用</h3> <p>函数定义好之后不会立即执行, 需要执行到调用函数的代码时才会执行</p> <p><strong>语法</strong>:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> 变量 <span class="token operator">=</span> <span class="token function">函数名</span><span class="token punctuation">(</span>实参<span class="token number">1</span><span class="token punctuation">,</span>实参<span class="token number">2</span><span class="token punctuation">,</span>实参<span class="token number">3</span><span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>函数如果有返回值, 那么变量接收到的结果则是实际返回的值</p> <p>函数如果没有返回值,那么变量的值为 undefined, 此时通常不用去接收.</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 普通函数定义,有参有返回</span>
<span class="token keyword">function</span> <span class="token function">doWork1</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 普通函数定义,无参无返回</span>
<span class="token keyword">function</span> <span class="token function">doWork2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 匿名函数定义，把没有名称的函数赋值给一个变量（当变量的值）</span>
<span class="token keyword">var</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword">return</span> x<span class="token operator">+</span>y<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 多个参数多行函数体</span>
<span class="token keyword">var</span> <span class="token function-variable function">fun1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">username<span class="token punctuation">,</span>age</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>username<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 普通函数调用</span>
<span class="token keyword">var</span> ret1 <span class="token operator">=</span> <span class="token function">doWork1</span><span class="token punctuation">(</span><span class="token string">&quot;小狼&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ret2 <span class="token operator">=</span> <span class="token function">doWork2</span><span class="token punctuation">(</span><span class="token string">&quot;小虎&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ret1<span class="token punctuation">)</span><span class="token punctuation">;</span>		<span class="token comment">// 小狼</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ret2<span class="token punctuation">)</span><span class="token punctuation">;</span>		<span class="token comment">// 小虎 --&gt;  undefined</span>

<span class="token comment">// 匿名函数调用</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 直接把变量作为函数名去调用匿名行数</span>

<span class="token comment">// 把匿名函数作为变量的值传递给另一个函数（printAddResult），在另一个函数中来调用</span>
<span class="token keyword">function</span> <span class="token function">printAddResult</span><span class="token punctuation">(</span><span class="token parameter">add</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 调用printAddResult 时带入匿名函数add</span>
<span class="token function">printAddResult</span><span class="token punctuation">(</span>add<span class="token punctuation">)</span><span class="token punctuation">;</span>	<span class="token comment">// 传入已定义的函数</span>

<span class="token comment">// 调用 printAddResult 时重新定义函数</span>
<span class="token function">printAddResult</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 箭头函数的定义</span>
<span class="token function">fun1</span><span class="token punctuation">(</span><span class="token string">&quot;小丽&quot;</span><span class="token punctuation">,</span><span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 可以将箭头函数作为匿名函数使用</span>
<span class="token function">printAddResult</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> x<span class="token operator">-</span>y<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br></div></div><p><strong>注意: 调用函数时, 实参和定义函数的形参可以不一致</strong></p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>		   <span class="token comment">// add 函数被调用，但是参数都为 undefined</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 只会只有前两个，后面的自动忽略</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>查看函数被调用时带了哪些参数</strong>：<strong>arguments</strong></p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">doWork3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>	<span class="token comment">// 每个函数都内置了一个arguments属性，用于存放调用时带入的实际参数值</span>
<span class="token punctuation">}</span>

<span class="token function">doWork3</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">.</span>
<span class="token function">doWork3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">doWork3</span><span class="token punctuation">(</span><span class="token string">&quot;小狼&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;小码&quot;</span><span class="token punctuation">,</span><span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>注意</strong>： 箭头函数没有 arguments；</p> <h2 id="四、面向对象"><a href="#四、面向对象" class="header-anchor">#</a> 四、面向对象</h2> <p>JavaScript 提供了一个构造函数（Constructor）模式。 所谓”构造函数”，其实就是一个普通函数，但是内部使用了 this 变量。对构造函数使用 new 运算符，就能生成实例，并且 this 变量会绑定在实例对象上。加 new 执行的构造函数内部变化：自动生成一个对象，this 指向这个新创建的对象，函数自动返回这个新创建的对象。</p> <p><strong>构造函数(类)定义</strong>：</p> <div class="language-java line-numbers-mode"><pre class="language-java"><code><span class="token comment">//如何使用JS来定义一个类(构造函数)</span>
function <span class="token class-name">Person</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> age<span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token comment">//添加属性</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
	<span class="token comment">//添加方法</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span>sleep <span class="token operator">=</span> <span class="token function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;困了,睡一觉&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><strong>创建对象和操作成员</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 使用构造函数来创建对象</span>
<span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;小狼&quot;</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 访问对象中的成员</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 访问对象中的方法</span>
p<span class="token punctuation">.</span><span class="token function">sleep</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

p<span class="token punctuation">.</span>name<span class="token operator">=</span><span class="token string">&quot;小码&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// JS中,可以单独为某一个对象添加成员</span>
p<span class="token punctuation">.</span>xxx <span class="token operator">=</span> <span class="token string">&quot;ooo&quot;</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> p2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;xxx&quot;</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p2<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><strong>构造函数注意事项:</strong></p> <p>此时 Person 称之为构造函数，也可以称之类，构造函数就是类 。</p> <p>p1, p2 均为 Person 的实例对象。</p> <p>Person 构造函数中 this 指向 Person 实例对象, 即 new Person( ) 出来的对象。</p> <p>构造函数首字母大写，这是规范，官方都遵循这一个规范，如 Number() Array()。</p> <p><strong>创建对象的快捷方式</strong>：字面式创建对象</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">username</span><span class="token operator">:</span><span class="token string">&quot;小狼&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span><span class="token string">&quot;18&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>username<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>注意</strong>：属性名如果有特殊字符需要加引号括起来。</p> <h3 id="_4-1-内置对象-了解"><a href="#_4-1-内置对象-了解" class="header-anchor">#</a> 4.1 内置对象(了解)</h3> <p>参见 W3C javascript.chm ---&gt; ECMAScript 对象类型。</p> <ol><li><p>Object</p> <ul><li><p>constructor</p> <p>对创建对象的函数的引用（指针）。对于 Object 对象，该指针指向原始的 Object() 函数。</p></li> <li><p>Prototype</p> <p>对该对象的对象原型的引用。对于所有的对象，它默认返回 Object 对象的一个实例。</p></li></ul> <p>Object 对象还具有几个方法：</p> <ul><li><p>hasOwnProperty(property)</p> <p>判断对象是否有某个特定的属性。必须用字符串指定该属性。（例如，o.hasOwnProperty(&quot;name&quot;)）</p></li> <li><p>IsPrototypeOf(object)</p> <p>判断该对象是否为另一个对象的原型。</p></li> <li><p>PropertyIsEnumerable</p> <p>判断给定的属性是否可以用 for...in 语句进行枚举。</p></li> <li><p>ToString()</p> <p>返回对象的原始字符串表示。对于 Object 对象，ECMA-262 没有定义这个值，所以不同的 ECMAScript 实现具有不同的值。</p></li></ul></li> <li><p>Date</p> <ul><li>Date()	返回当前日期和事件</li> <li>getFullYear()    获取Date对象中四位数字的年份</li> <li>getMonth()      获取Date对象中的月份(0~11)</li> <li>getDate()         获取Date对象中的天(1~31)</li> <li>getHours()       获取Date对象中的小时</li> <li>getMinutes()      获取Date对象中的分钟</li> <li>getSeconds()    获取Date对象中的秒</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> time <span class="token operator">=</span> d<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;-&quot;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>d<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;-&quot;</span> <span class="token operator">+</span> d<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot; &quot;</span> <span class="token operator">+</span> d<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;:&quot;</span> <span class="token operator">+</span> d<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;:&quot;</span> <span class="token operator">+</span> d<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></li> <li><p>String</p> <p>属性:</p> <ul><li>length 字符个数</li></ul> <p>方法</p> <ul><li>charAt(index) 返回指定位置的字符</li> <li>concat(string1,string2,string3,....)   拼接字符串</li> <li>fromCharCode(num)  可接受一个指定的 Unicode 值，然后返回一个字符串</li> <li>substring(start,stop)  提取字符串中两个指定的索引号之间的字符。</li></ul></li></ol> <h2 id="五、数组"><a href="#五、数组" class="header-anchor">#</a> 五、数组</h2> <h3 id="_5-1-数组的定义方式"><a href="#_5-1-数组的定义方式" class="header-anchor">#</a> 5.1 数组的定义方式</h3> <ul><li><p>创建数组对象
var arr = new Array();</p></li> <li><p>类似数组中的静态初始化
var arr2 = new Array(&quot;西施&quot;,&quot;王昭君&quot;,&quot;貂蝉&quot;,&quot;杨贵妃&quot;);
var arr2 = new Array(1, 2, 3, 4);</p></li> <li><p>类似数组的动态初始化
var arr3 = new  Array(4);//这里的4是数组的长度,而不是元素</p></li> <li><p>简写</p> <p>var arr4 = [&quot;西施&quot;, &quot;王昭君&quot;, &quot;貂蝉&quot;, &quot;杨贵妃&quot;];</p></li></ul> <p><strong>注意</strong>：
对于 js 中的数组不会出现数组越界的异常，也不是定长的。</p> <h3 id="_5-2-数组中的常用属性和方法"><a href="#_5-2-数组中的常用属性和方法" class="header-anchor">#</a> 5.2 数组中的常用属性和方法</h3> <ol><li><p>属性
length 属性，获取数组长度。</p></li> <li><p>方法
concat(array1, array2, ......, arrayX)：连接两个或更多的数组，并返回结果。
join(separator)：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
reverse()：颠倒数组中元素的顺序（该方法会改变原来的数组，而不会创建新的数组）。
slice(start[, end])：从某个已有的数组返回选定的元素（返回的是一个新数组）。</p> <p>pop()：删除并返回数组的最后一个元素。
shift()：删除并返回数组的第一个元素。
push(newelement1, newelement2, ...., newelementX)：向数组的末尾添加一个或更多元素，并返回新的长度。
unshift(newelement1, newelement2, ...., newelementX)：向数组的开头添加一个或更多元素，并返回新的长度。
splice(index, howmany, element1, ....., elementX)：用于插入、删除或替换数组的元素。</p></li></ol> <h3 id="_5-3-数组的遍历方式"><a href="#_5-3-数组的遍历方式" class="header-anchor">#</a> 5.3 数组的遍历方式</h3> <ol><li><p>for
最简单的一种循环遍历方法，也是使用频率最高的一种</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;B&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;C&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li> <li><p>forEach</p> <p>数组里的元素个数有几个，该方法里的回调函数就会执行几次
第一个参数是数组里的元素</p> <p>第二个参数为数组里元素的索引</p> <p>第三个参数则是遍历的数组本身
数组自带的遍历方法，虽然使用频率略高，但是性能仍然比普通循环略低</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;B&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;C&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span>index<span class="token punctuation">,</span>array</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>注意</strong>: 函数中的 arguments 存了调用函数时带入的实际数据,可通过 arguments  获取带入的数据.</p></li> <li><p>map</p> <p>遍历数组中的每个元素,将回调函数中的返回值存到一个新的数组中,并返回</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;B&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;C&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> newArr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span>index<span class="token punctuation">,</span>array</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> item<span class="token operator">+</span>index<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//newArr中的数据:[&quot;A1&quot;,&quot;B2&quot;,&quot;C3&quot;,&quot;D4&quot;]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>4.for-in</p> <p>可以遍历数组（获取数组的索引）；也可以遍历对象（获取对象的属性名）。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//如果是遍历数组,i对应的是数组的索引</span>
<span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;B&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;C&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token keyword">in</span> arr<span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token comment">//索引</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//元素</span>
<span class="token punctuation">}</span>

<span class="token comment">//如果是遍历对象,name对应的是属性名</span>
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 给 obj 对象增加属性</span>
obj<span class="token punctuation">.</span>username <span class="token operator">=</span> <span class="token string">&quot;小狼&quot;</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> name <span class="token keyword">in</span> obj<span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">//属性名</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div></li></ol> <h2 id="六、js-中的-dom"><a href="#六、js-中的-dom" class="header-anchor">#</a> 六、JS 中的 DOM</h2> <h3 id="_6-1-dom-的概述"><a href="#_6-1-dom-的概述" class="header-anchor">#</a> 6.1 DOM 的概述</h3> <p>DOM 是 Document Object Model 文档对象模型的缩写。根据 W3C DOM 规范，DOM 是一种与浏览器，平台，语言无关的接口，可动态地修改 XML 和 HTML。
​		D：文档  –  HTML文档 或 XML 文档
​		O：对象 – document 对象的属性和方法
​		M：模型</p> <p>今天我们讲的是 HTML DOM。</p> <p>HTML DOM</p> <p>DOM 是将 HTML 文档表达为树结构， 定义了访问和操作 HTML 文档的标准方法；
DOM 树：节点（node）的层次。文档节点（document）、元素节点、属性节点	
DOM 把一个文档表示为一棵家谱树（父，子，兄弟）。</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200505235321305.png" alt="image-20200505235321305"></p> <h3 id="_6-2-获取元素"><a href="#_6-2-获取元素" class="header-anchor">#</a> 6.2 获取元素</h3> <h4 id="_6-2-1-document-变量"><a href="#_6-2-1-document-变量" class="header-anchor">#</a> 6.2.1 document 变量</h4> <p>document 是 js 中自定义好的文档对象，当浏览器加载 HTML 网页时自动创建，从上往下每解析一行标签则存入一行标签到 document 对象中。</p> <p><strong>注意</strong> 因为 HTML 是从上往下解析的，所以在  js 中使用 document 获取元素对象时需注意执行到获取代码时，标签是否已经加载到 document 对象中。</p> <h4 id="_6-2-2-window-onload-函数"><a href="#_6-2-2-window-onload-函数" class="header-anchor">#</a> 6.2.2 window.onload 函数</h4> <p>在 js 中有 window.onload 函数，浏览器在加载完 HTML 页面时会调用 onload 函数。所以我们可以把代码放到该函数中，当浏览器加载完 HTML 再执行。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 操作标签</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="_6-2-3-元素获取两个核心"><a href="#_6-2-3-元素获取两个核心" class="header-anchor">#</a> 6.2.3 元素获取两个核心</h4> <p>1 什么时候可以去获取元素？ 只有元素被加载到 document 中才可以获取</p> <p>2 如何去获取元素？</p> <h4 id="_6-2-4-元素获取方式"><a href="#_6-2-4-元素获取方式" class="header-anchor">#</a> 6.2.4 元素获取方式</h4> <ol><li>通过元素 Id
getElementById，返回拥有指定 id 的第一个元素，如果不存在则返回 null</li> <li>通过标签名字
getElementsByTagName，返回一个包括所有给定标签名称的元素集合，如果没有匹配的元素，返回一个空集。</li> <li>通过 class 名字
getElementsByClassName，返回一个包含所有指定class名称的元素集合，可以在任意元素上调用该方法。</li></ol> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200507103825683.png" alt="image-20200507103825683"></p> <h3 id="_6-3-元素节点的属性操作"><a href="#_6-3-元素节点的属性操作" class="header-anchor">#</a> 6.3 元素节点的属性操作</h3> <ul><li><p><strong>操作标准属性</strong></p> <p>获取属性值
元素对象.属性名
元素对象[“属性名”]
元素对象.getAttribute(&quot;属性名&quot;)</p> <p>设置属性值：
元素对象.属性名 = 值
元素对象[”属性名”] = 值
元素对象.setAttribute(&quot;属性名&quot;, 值)</p></li> <li><p><strong>操作自定义属性</strong></p> <p>获取属性值：
元素对象.getAttribute(&quot;属性名&quot;)</p> <p>设置属性值：
元素对象.setAttribute(&quot;属性名&quot;, 值)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
        window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 1 获取标签对象</span>
        <span class="token keyword">let</span> div1Id <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;div1Id&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 2 操作属性(存&amp;&amp;取)</span>
        <span class="token comment">// 2.1 标准属性(内置的属性 id class style title)</span>
        <span class="token comment">// 2.1.1 普通的标准属性</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span>id<span class="token punctuation">,</span> div1Id<span class="token punctuation">[</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>div1Id<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        div1Id<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">&quot;newDivId1&quot;</span><span class="token punctuation">;</span>
        div1Id<span class="token punctuation">[</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">&quot;newDivId2&quot;</span><span class="token punctuation">;</span>
        div1Id<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;newDivId3&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// 2.1.2 特殊的标准属性</span>
        <span class="token comment">// 使用关键字,保留字（使用内置的别名）</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span>className<span class="token punctuation">,</span>div1Id<span class="token punctuation">[</span><span class="token string">&quot;className&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>div1Id<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;class&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取到的是样式对象（可以直接操作成员）</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span>style<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">[</span><span class="token string">&quot;style&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取到的是字符串，没办法直接操作成员</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;style&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 如果要单独获取样式中的某个样式，用对象的方式比较方便</span>
        <span class="token comment">// 属性带有特殊符号，不能直接用点的方式来操作（可以使用别名或[] 的方式来操作）</span>
        <span class="token comment">// 样式对象不存在 getAttribute，setAttribute 方法，只要元素对象有</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span>style<span class="token punctuation">[</span><span class="token string">&quot;background-color&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>div1Id<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// 2.2 自定义属性 (只能使用 getter 和 setter 方法)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span>oo<span class="token punctuation">,</span> div1Id<span class="token punctuation">[</span><span class="token string">&quot;oo&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>div1Id<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;oo&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// 2.3 特殊属性：key=value(checked=&quot;checked&quot;,selected=&quot;selected&quot;)</span>
        <span class="token comment">// 值是 true 和 false，所以赋值时也只能用true 和 false，表示有无该属性</span>
        <span class="token keyword">let</span> checkEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;checkId&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>checkEl<span class="token punctuation">.</span>checked<span class="token punctuation">,</span>checkEl<span class="token punctuation">[</span><span class="token string">'checked'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>checkEl<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;checked&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// checkEl.checked = false;</span>
        <span class="token comment">// 不能使用 getAttribute 和 setAttribute 来操作这类属性（无效）</span>
        checkEl<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;checked&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;sss&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 元素 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">oo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>div1Id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>divClz<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>div1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkId<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></li></ul> <h3 id="_6-4-node-对象的属性和方法"><a href="#_6-4-node-对象的属性和方法" class="header-anchor">#</a> 6.4 Node 对象的属性和方法</h3> <h4 id="_6-4-1-常用属性"><a href="#_6-4-1-常用属性" class="header-anchor">#</a> 6.4.1 常用属性</h4> <table><thead><tr><th>属性名</th> <th>描述</th></tr></thead> <tbody><tr><td>firstChild</td> <td>指向在子节点列表中的第一个节点</td></tr> <tr><td>lastChild</td> <td>指向在子节点列表中的最后一个节点</td></tr> <tr><td>childNodes</td> <td>所有子节点的列表</td></tr> <tr><td>previousSibling</td> <td>指向前一个兄弟节点,如果这个节点就是第一个,那么该值为null</td></tr> <tr><td>nextSibling</td> <td>指向后一个兄弟节点,如果这个节点就是最后一个,那么该值为nullsnoi</td></tr> <tr><td>parentNode</td> <td>父节点</td></tr></tbody></table> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200505235413304.png" alt="image-20200505235413304"></p> <p>例子：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> parentEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;parentId&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取所有子节点</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parentEl<span class="token punctuation">.</span>childNodes<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取div1 和div3</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parentEl<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>nextSibling<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parentEl<span class="token punctuation">.</span>lastChild<span class="token punctuation">.</span>previousSibling<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取父节点</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parentEl<span class="token punctuation">.</span>lastChild<span class="token punctuation">.</span>parentNode<span class="token punctuation">,</span> parentEl<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>parentNode<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>parentId<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>div1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>div2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>div3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h4 id="_6-4-2-常用方法"><a href="#_6-4-2-常用方法" class="header-anchor">#</a> 6.4.2 常用方法</h4> <table><thead><tr><th>方法名</th> <th>描述</th></tr></thead> <tbody><tr><td>hasChildNodes()</td> <td>是否包含子节点</td></tr> <tr><td>appendChild(node)</td> <td>将节点添加到子节点列表的末尾</td></tr> <tr><td>removeChild(node)</td> <td>从子节点中删除 node</td></tr> <tr><td>replaceChild(newNode,oldNode)</td> <td>替换子节点</td></tr> <tr><td>insertBefore(newNode,refNode)</td> <td>在一个子节点前插入一个新的子节点,在refNode元素前插入newNode</td></tr></tbody></table> <h3 id="_6-5-元素节点的增删改案例"><a href="#_6-5-元素节点的增删改案例" class="header-anchor">#</a> 6.5 元素节点的增删改案例</h3> <p>使用原节点中的方法,可以完成对元素的增删改操作</p> <p>完成 [资料/练习/DOM练习/index.html] 页面中的练习</p> <p><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200505235439171.png" alt="image-20200505235439171"></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">function</span> <span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// 获取 span1 元素</span>
            <span class="token keyword">let</span> span1El <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;span1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 获取div1 元素</span>
            <span class="token keyword">let</span> div1El <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;div1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 把 span1元素加入到 div1 里面</span>
            div1El<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>span1El<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">function</span> <span class="token function">fun2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// 1 获取所有的 span 元素</span>
            <span class="token keyword">let</span> spanEls <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">&quot;span&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>spanEls<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 2 获取 div2 元素</span>
            <span class="token keyword">let</span> div2El <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;div2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 3 把获取到的 span 加到 div2 里面</span>
            <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>spanEls<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                div2El<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>spanEls<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">function</span> <span class="token function">fun3</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
             <span class="token keyword">let</span> div3El <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;div3&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
             <span class="token comment">// 2 新建一个 span 元素对象</span>
             <span class="token comment">// let spanEl = document.createElement(&quot;span&quot;);</span>
             <span class="token comment">// innerHTML 可以加入普通文本，还可以加入子标签</span>
             <span class="token comment">// spanEl.innerHTML = &quot;newSpan&quot;;</span>
             <span class="token comment">// 直接把元素作为文本加入到另一个元素中,这种方式会覆盖之前的文本</span>
             div3El<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> div3El<span class="token punctuation">.</span>innerHTML <span class="token operator">+</span> <span class="token string">&quot; &lt;span&gt;newSpan&lt;/span&gt;&quot;</span><span class="token punctuation">;</span>
             <span class="token comment">// 可以使用方法去创建一个新的元素对象,然后在追加到div3中</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>span1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>span2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>span3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>span3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><h2 id="七、事件处理"><a href="#七、事件处理" class="header-anchor">#</a> 七、事件处理</h2> <h3 id="_7-1-事件驱动编程"><a href="#_7-1-事件驱动编程" class="header-anchor">#</a> 7.1 事件驱动编程</h3> <p>所谓事件驱动,简单地说就是你怎么触碰按钮(即产生什么事件),浏览器执行什么操作(即调用什么函数).当然事件不仅限于用户的操作. 当对象处于某种状态时，可以发出一个消息通知，然后对这个消息感兴趣的程序就可以执行。</p> <p><strong>在生活中</strong>: 风和日丽的周末,你在大街上看到一个美女带着一婴儿,粉嫩粉嫩的,控制不住自己，在婴儿脸上捏了一下,美女给了你一巴掌,很痛.</p> <h3 id="_7-2-事件驱动编程的核心对象"><a href="#_7-2-事件驱动编程的核心对象" class="header-anchor">#</a> 7.2 事件驱动编程的核心对象</h3> <ol><li><p><strong>事件源</strong></p> <p>谁发出事件通知，发出消息；也就是事件主体（通常指元素/标签）；</p></li> <li><p><strong>事件名称</strong></p> <p>发出什么样的通知的名称，比如鼠标到我头上了，我被别人点了一下；</p></li> <li><p><strong>事件响应函数</strong></p> <p>谁对这个这个事件感兴趣，当这个事件发生时要执行什么样的操作；</p></li> <li><p>事件对象</p> <p>一般来说，当事件发生时，会产生一个描述该事件的具体对象，包括具体的参数等一起发给响应函数，好让他们通过事件对象来了解事件更加详细的信息。</p></li></ol> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!--
	p元素是事件源
	click是事件名称
--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> red</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p1<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">shout</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token comment">//响应函数</span>
	<span class="token keyword">function</span> <span class="token function">shout</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token comment">//响应函数，监听函数</span>
      <span class="token function">alert</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>clientX<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//e事件对象</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="_7-3-事件类型-常用"><a href="#_7-3-事件类型-常用" class="header-anchor">#</a> 7.3 事件类型(常用)</h3> <h4 id="_7-3-1-鼠标事件"><a href="#_7-3-1-鼠标事件" class="header-anchor">#</a> 7.3.1 鼠标事件</h4> <table><thead><tr><th>属性</th> <th>描述</th></tr></thead> <tbody><tr><td>onclick</td> <td>当用户点击某个对象时调用的事件句柄</td></tr> <tr><td>ondblclick</td> <td>当用户双击某个对象时调用的事件句柄</td></tr> <tr><td>onmousedown</td> <td>鼠标按钮被按下</td></tr> <tr><td>onmouseup</td> <td>鼠标按键被松开</td></tr> <tr><td>onmouseleave</td> <td>当鼠标指针移出元素时触发</td></tr> <tr><td>onmousemove</td> <td>鼠标被移动</td></tr> <tr><td>onmouseover</td> <td>鼠标移到某元素之上</td></tr> <tr><td>onmouseout</td> <td>鼠标从某元素移开</td></tr></tbody></table> <h4 id="_7-3-2-键盘事件"><a href="#_7-3-2-键盘事件" class="header-anchor">#</a> 7.3.2 键盘事件</h4> <table><thead><tr><th>属性</th> <th>描述</th></tr></thead> <tbody><tr><td>onkeydown</td> <td>某个键盘按键被按下</td></tr> <tr><td>onkeypress</td> <td>某个键盘按键被按下并松开</td></tr> <tr><td>onkeyup</td> <td>某个键盘按键被松开</td></tr></tbody></table> <h4 id="_7-3-3-表单事件-form"><a href="#_7-3-3-表单事件-form" class="header-anchor">#</a> 7.3.3 表单事件 form</h4> <table><thead><tr><th>属性</th> <th>描述</th></tr></thead> <tbody><tr><td>onblur</td> <td>元素失去焦点时触发</td></tr> <tr><td>onchange</td> <td>该事件在表单元素的内容改变时触发</td></tr> <tr><td>onfocus</td> <td>元素获取焦点时触发</td></tr> <tr><td>onsubmit</td> <td>表单提交时触发</td></tr></tbody></table> <h3 id="_7-4-事件绑定的方式"><a href="#_7-4-事件绑定的方式" class="header-anchor">#</a> 7.4 事件绑定的方式</h3> <p>元素本身是不自带事件的, 如果需要给元素添加功能的时候, 需要先给其绑定上对应的事件, 然后用户触发元素对应的事件时,执行之前绑定好的响应函数</p> <p>给元素绑定事件有三种方式</p> <h4 id="_7-4-1-在标签上使用onxxx属性绑定"><a href="#_7-4-1-在标签上使用onxxx属性绑定" class="header-anchor">#</a> 7.4.1 在标签上使用onXxx属性绑定</h4> <p>xxx事件名称/类型.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>点我啊<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'点我干啥?'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>该方式特别简单,但是缺点是 HTML 和 JS 交错在一起,维护性差.</p> <h4 id="_7-4-2-通过元素对象的事件属性绑定"><a href="#_7-4-2-通过元素对象的事件属性绑定" class="header-anchor">#</a> 7.4.2 通过元素对象的事件属性绑定</h4> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!--在该元素被加载完的时候没有绑定事件--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>点我啊<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//使用JS代码为元素绑定事件</span>
<span class="token keyword">let</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;点我干啥&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>这种方式,使得 HTML 和 JS 完全分离开来,便于后期维护, 推荐使用.</p> <p><font color="blue">注意: 使用这种方式为元素绑定事件, 一定是要在元素被加载后,然后再执行上面的JS代码, 这样才能绑定成功. 试想,一个人都还没出生, 你怎么能让他做事呢?</font></p> <p>所以,绑定事件的 JS 代码编写的位置很重要,通常有两种方式</p> <ol><li><p>在元素后面编写js代码</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>点我啊<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">//在input元素被加载后再根据id获取这个元素,可行</span>
	<span class="token keyword">let</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    	<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;点我干啥&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div></li> <li><p>使用文档加载事件, 在整个html文档加载完成之后再获取元素,绑定事件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//这个函数中的代码会在整个文档加载完成之后再执行</span>
    <span class="token comment">//此时获取元素,可行</span>
	<span class="token keyword">let</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    	<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;点我干啥&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div></li></ol> <p>案例二：美女图片切换</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取 img 标签对象</span>
    <span class="token keyword">let</span> imgEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;image&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 修改src属性值</span>
    imgEl<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">&quot;b.png&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">fun2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 获取 img 标签对象</span>
    <span class="token keyword">let</span> imgEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;image&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 修改src属性值</span>
    imgEl<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">&quot;a.png&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 使用js 来给事件源绑定事件</span>
    document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;image2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onmouseover</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">&quot;b.png&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;image2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onmouseout</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">&quot;a.png&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a.png<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onmouseover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token special-attr"><span class="token attr-name">onmouseout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">fun2</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>前面两种方式都存在一个小问题,不能为元素绑定多次相同的事件,因为是通过为事件属性赋值响应函数的方式来实现的,后面的赋值会将前面的覆盖掉.</p> <p>如果想要为元素绑定多次相同的事件,此时需要使用方式三, 当然,在实际开发中,这种需求很少, 所以我们了解即可</p> <h4 id="_7-4-3-通过元素对象的方法绑定事件"><a href="#_7-4-3-通过元素对象的方法绑定事件" class="header-anchor">#</a> 7.4.3 通过元素对象的方法绑定事件</h4> <p>这种方式存在浏览器兼容的问题, IE和非IE使用的方法不一样</p> <p><strong>IE: attachEvent</strong>
[Object].attachEvent(“name_of_event_handler”, fnHandler);
name_of_event_handler: 事件名称前必须加&quot;on&quot;, 多次添加监听后,触发顺序: <strong>先添加的后执行</strong></p> <p>​	fnHandler: 事件响应函数</p> <p>​    [Object].detachEvent(“name_of_event_handler”, fnHandler);
​        fnHandler : 移除时,传入的&quot;事件响应函数&quot;,必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
​        匿名函数,每次创建的都不同</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">let</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 绑定事件</span>
    btn<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">&quot;onclick&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;点我干啥?&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    btn<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">&quot;onclick&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;又来,想si啊!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><strong>非IE浏览器和IE9及以上: addEventListener</strong>
[Object].addEventListener(“name_of_event”, fnHandler);
name_of_event: 直接使用事件(操作)名称,没有on, 多次添加监听后,触发顺序: <strong>先添加的先执行</strong></p> <p>​		fnHandler: 事件响应函数</p> <p>​    [Object].removeEventListener(“name_of_event”, fnHandler);
​        fnHandler : 移除时,传入的&quot;事件响应函数&quot;,必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
​        匿名函数,每次创建的都不同</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">let</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 绑定事件</span>
    btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;点我干啥?&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;又来,想si啊!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="八、综合练习"><a href="#八、综合练习" class="header-anchor">#</a> 八、综合练习</h2> <p>使用提供好的 html 页面(4_js\资料\练习\DOM练习),完成以下练习</p> <p>案例页面：01.echo.html</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;</span> <span class="token string">&quot;http://www.w3.org/TR/html4/loose.dtd&quot;</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Content-Type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/html; charset=UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>列表回显<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/static/jQuery-1.11/jquery-1.11.3.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>s1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>回显第3个选项<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">echo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>案例页面：02.select.html</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;</span> <span class="token string">&quot;http://www.w3.org/TR/html4/loose.dtd&quot;</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Content-Type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/html; charset=UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>列表移动<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/static/jQuery-1.11/jquery-1.11.3.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select1<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>200px</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>multiple<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项7<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项9<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项9<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">moveSelected</span><span class="token punctuation">(</span><span class="token string">'select1'</span><span class="token punctuation">,</span><span class="token string">'select2'</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>--&gt;<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">moveAll</span><span class="token punctuation">(</span><span class="token string">'select1'</span><span class="token punctuation">,</span><span class="token string">'select2'</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>==&gt;<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">moveSelected</span><span class="token punctuation">(</span><span class="token string">'select2'</span><span class="token punctuation">,</span><span class="token string">'select1'</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>&lt;--<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">moveAll</span><span class="token punctuation">(</span><span class="token string">'select2'</span><span class="token punctuation">,</span><span class="token string">'select1'</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>&lt;==<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select2<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>200px</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>multiple<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><p>案例页面：03.distinct.html</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;</span> <span class="token string">&quot;http://www.w3.org/TR/html4/loose.dtd&quot;</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Content-Type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/html; charset=UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>列表去重<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/static/jQuery-1.11/jquery-1.11.3.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>s1<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>multiple<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>去除重复<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">distinct</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>s2<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>multiple<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选项5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><p>案例页面：04.checkbox.html</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;</span> <span class="token string">&quot;http://www.w3.org/TR/html4/loose.dtd&quot;</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Content-Type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/html; charset=UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>复选框<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/static/jQuery-1.11/jquery-1.11.3.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
	请选择你的爱好:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">checkChange</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkAll<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>全选/全不选<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hobby<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>JAVA<span class="token entity named-entity" title="&amp;nbsp;">&amp;nbsp;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hobby<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>打篮球<span class="token entity named-entity" title="&amp;nbsp;">&amp;nbsp;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hobby<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>上网<span class="token entity named-entity" title="&amp;nbsp;">&amp;nbsp;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hobby<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>撩妹<span class="token entity named-entity" title="&amp;nbsp;">&amp;nbsp;</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn_checkAll<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">checkAll</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>全选<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">checkAll</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>全不选<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">checkUnAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>反选<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p>练习的目的在于熟悉以下点</p> <ol><li><p>html元素</p> <ol><li>复选框</li> <li>下拉框</li> <li>表单元素(文本框)</li></ol></li> <li><p>dom</p> <ol><li>获取元素的方法</li></ol></li> <li><p>绑定事件</p></li> <li><p>复选框的 checked 属性</p></li> <li><p>下拉框的 selected 属性</p></li> <li><p>文本框的 value 属性</p></li> <li><p>数组的遍历</p></li> <li><p>添加子元素</p></li> <li><p>创建新元素</p></li> <li><p>为元素设置属性</p></li> <li><p>删除子元素</p></li></ol> <h2 id="九、小结与作业"><a href="#九、小结与作业" class="header-anchor">#</a> 九、小结与作业</h2> <h3 id="_9-1-小结"><a href="#_9-1-小结" class="header-anchor">#</a> 9.1 小结</h3> <ul><li>了解JavaScript基本点</li> <li>掌握js变量定义与使用</li> <li>掌握js基本语法、变量、数据类型、运算符--建议5遍</li> <li>掌握js概述、定义、调用</li> <li>了解js中内置对象</li> <li>掌握js中自定义对象与使用</li> <li>掌握js中数组定义与操作api</li> <li>了解js中dom操作</li> <li>掌握js中事件处理-概念+事件对象+绑定方式-事件类型</li></ul> <h3 id="_9-2-作业"><a href="#_9-2-作业" class="header-anchor">#</a> 9.2 作业</h3> <ul><li>练习 JS 的变量使用</li> <li>练习 JS 中获取变量的类型以及类型的修改</li> <li>练习 JS 中特殊的运算符</li> <li>练习 函数 的定义和函数的调用(<strong>重中之重</strong>)</li> <li>练习构造函数的定义和对象的创建(字面式对象的创建)</li> <li>练习数组的定义(简单的定义方式)与循环</li> <li>练习一遍 forEach 和 map 的遍历并理解匿名函数(回调函数)的使用</li> <li>练习通过js 的dom api 来获取元素的三种方式</li> <li>练习通过js 的dom api 来操作元素的属性</li> <li>完成元素节点的 CRUD 案例</li> <li>完成美女图片切换的案例</li> <li>综合练习每个练习至少完成一遍</li></ul></div></div>  <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=JS" title="标签">#JS</a><a href="/tags/?tag=DOM" title="标签">#DOM</a></div> <!----></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/84c5d2/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">HTML与CSS</div></a> <a href="/pages/1125b7/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">网络编程与Tomcat</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/84c5d2/" class="prev">HTML与CSS</a></span> <span class="next"><a href="/pages/1125b7/">网络编程与Tomcat</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/0c07b2/"><div>
            IT杂货铺
            <!----></div></a> <span class="date">03-23</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/705b35/"><div>
            人事百问
            <!----></div></a> <span class="date">03-22</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/78eb56/"><div>
            MyBatis-Plus
            <!----></div></a> <span class="date">03-12</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:langfeiyes@163.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/langfeiyes" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2024-2024
    <span><a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备18007927号-1</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.a2a00aa5.js" defer></script><script src="/assets/js/2.256f807a.js" defer></script><script src="/assets/js/37.c4e27bbd.js" defer></script>
  </body>
</html>
